<template>
  <div>
    <component :is="componentsList[itemType]" :data="props.data"    @changeForm="changeForm"></component>
  </div>
</template>
<script setup>
import { ref, reactive, watch,defineEmits, defineProps, defineAsyncComponent } from "vue";
const props = defineProps({
  data: Object,
  index:Number
});
const emit = defineEmits(['changeForm'])
const itemType = ref("");
const componentsList = reactive({
  button: defineAsyncComponent(() =>
    import(`@/views/modules/Online/design/components/button/btn_config`)
  ),
});

const changeForm = (newValue,id) => {
   emit('changeForm',newValue,id,props.index)
}
watch(
  props,
  (newValue) => {
    itemType.value = newValue.data.type;
  },
  { deep: true, immediate: true }
);
</script>
